<template>
  <div class="list-table noPad scheduleBox">
    <el-tabs v-model="active" @tab-click="tabClickHandle">
      <el-tab-pane :label="$t('月视图')" name="first">
        <FullCalendar
          ref="fullCalendar"
          v-loading="loading"
          default-view="dayGridMonth"
          locale="zh-cn"
          first-day="1"
          week-number-calculation="ISO"
          :header="header"
          :plugins="calendarPlugins"
          :events="calendarEvents"
          :button-text="buttonText"
          :event-render="eventRender"
          @dateClick="handleDateClick"
          @eventClick="handleEventClick"
          @eventMouseEnter="handleMouseEnter"
        />

      </el-tab-pane>
      <el-tab-pane :label="$t('列表视图')" name="second">
        <oaWeekScheduleListPage ref="oaWeekScheduleListPage" />
      </el-tab-pane>
    </el-tabs>

    <!-- 添加日程 -->
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm calendarForm" append-to-body>
      <oaWeekScheduleForm ref="oaWeekScheduleForm" />
    </el-dialog>
  </div>
</template>

<script>
import oaWeekScheduleListPage from '@/views/oa/weekSchedule/oaWeekScheduleListPage'
import { listOaWeekSchedule } from '@/api/oa/weekSchedule/oaWeekSchedule'
import oaWeekScheduleForm from '@/views/oa/weekSchedule/oaWeekScheduleForm'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import '@fullcalendar/core/main.css'
import tippy from 'tippy.js'
import 'tippy.js/dist/tippy.css'
import 'tippy.js/themes/light.css'
import 'tippy.js/animations/scale.css'
export default {
  components: {
    FullCalendar,
    oaWeekScheduleListPage,
    oaWeekScheduleForm
  },
  data() {
    return {
      loading: true,
      active: 'first',
      formOpen: false,
      title: '日程',
      calendarPlugins: [
        dayGridPlugin,
        interactionPlugin
      ],
      header: {
        left: '',
        center: 'prev title next',
        right: 'today'
      },
      buttonText: {
        today: this.$t('今天')
      },
      calendarEvents: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleDateClick(arg) { // 当天
      this.formOpen = true
      this.$nextTick(() => {
        const initDate = {
          startTime: this.parseTime(arg.dateStr) + ' 09:00:00',
          finishTime: this.parseTime(arg.dateStr) + ' 18:00:00'
        }
        this.$refs.oaWeekScheduleForm.init(initDate)
      })
    },
    handleMouseEnter(info) {
      console.log(info.jsEvent)
      var event = info.event
      var content = event.title
      tippy(info.el, {
        content: content, // 悬浮框展示的内容
        theme: 'tomato', // 自定义主题，颜色在style中设置
        allowHTML: true, // 为true的时候，可以识别content中的html
        placement: 'auto',
        zIndex: 99999
        // interactive: true
      })
    },
    handleEventClick(info) { // 事件
      this.formOpen = true
      this.$nextTick(() => {
        this.$refs.oaWeekScheduleForm.init(info.event)
      })
    },
    getList() {
      listOaWeekSchedule().then(response => {
        if (response.code === 200) {
          // const eventArr = []
          response.rows.forEach(e => {
              e.title = e.personName + ':' + e.title
              e['color'] = e.oneself ? '#F56C6C' : '#409EFF'
          })
         this.calendarEvents = response.rows
          this.loading = false
        }
      })
    },
    tabClickHandle(tab) {
      if (tab.name === 'first') {
        this.getList()
      } else if (tab.name === 'second') {
        this.$refs.oaWeekScheduleListPage.getList()
      }
    },
    eventRender(info) {
      console.log('info', info)
      // 在事件渲染时改变颜色
      // var newColor = 'red' // 设置新的颜色
      // info.el.style.backgroundColor = newColor
      // info.el.style.borderColor = newColor
    }
  }
}
</script>
